<!-- 支付页面-------------- -->
<template>
	<view class="container">

		<view class="pay-box">
			<view class="pay-money">￥{{ price }}</view>
			<view class="pay-tips">请尽快完成支付，放弃支付订单将被取消</view>
		</view>

		<!-- 支付方式选择 -->
		<view class="pay-card">

			<view class="pay-item" @click="selectPayMethod('alipay')">
				<view class="pay-left">
					<image class="pay-icon" src="/static/aliay.png"></image>
					<text class="pay-name">支付宝支付</text>
				</view>
				<radio class="pay-radio" :checked="selectedPayMethod === 'alipay'" />
			</view>

			<view class="pay-item" @click="selectPayMethod('wechat')">
				<view class="pay-left">
					<image class="pay-icon" src="/static/weixin.png"></image>
					<text class="pay-name">微信支付</text>
				</view>
				<radio class="pay-radio" :checked="selectedPayMethod === 'wechat'" />
			</view>
		</view>
		<button class="pay-button" @click="handlePay">立即支付</button>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { payContractApi, updateStateApi } from '@/api/signs.js'

// 响应式数据
const price = ref()
const contractId = ref('') // 签约记录ID
const selectedPayMethod = ref('alipay') // 默认选择支付宝

// 页面加载时接收参数
onLoad((options) => {
	if (options.price) {
		price.value = options.price
	}
	if (options.contractId) {
		contractId.value = options.contractId
	}
})

// 处理支付
const handlePay = async () => {
	// 验证必要参数
	if (!contractId.value) {
		uni.showToast({
			title: '签约信息缺失，请重新进入',
			icon: 'none'
		})
		return
	}

	uni.showModal({
		title: '确认支付',
		content: `确认支付 ¥${price.value} 完成签约？`,
		success: async (res) => {
			if (res.confirm) {
				// 显示支付中
				uni.showLoading({
					title: '支付中...'
				})

				try {
					// 调用支付API
					const response = await payContractApi({
						_id: contractId.value
					})

					if (response.code === 200) {
						// 支付成功后，更新签约状态为已签约
						try {
							await updateStateApi({
								_id: contractId.value,
								state: '3' // 3-已签约（居民已支付，签约生效中）
							})
						} catch (error) {
							// 即使状态更新失败，也不影响支付成功的流程
						}

						uni.hideLoading()

						// 支付成功，跳转到成功页面
						uni.redirectTo({
							url: `/homepackge/pages/success/success?title=${encodeURIComponent('支付成功')}&description=${encodeURIComponent('您已成功签约家庭医生')}&primaryText=${encodeURIComponent('查看签约详情')}&secondaryText=${encodeURIComponent('返回首页')}&primaryUrl=${encodeURIComponent(`/homepackge/pages/payPage/payPage?contractId=${contractId.value}&paymentMethod=${selectedPayMethod.value}`)}`
						})
					} else if (response.code === 500) {
						uni.hideLoading()
						// 支付失败，签约还在审核中，返回签约支付页面
						uni.showModal({
							title: '支付失败',
							content: response.message || '签约还在审核中，请稍后再试',
							showCancel: false,
							confirmText: '我知道了',
							success: () => {
								// 返回上一页（签约支付页面）
								uni.navigateBack()
							}
						})
					} else {
						uni.hideLoading()
						// 其他错误
						uni.showToast({
							title: response.message,
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: '支付失败，请检查网络连接',
						icon: 'none'
					})
				}
			}
		}
	})
}

// 选择支付方式
const selectPayMethod = (method) => {
	selectedPayMethod.value = method
}
</script>

<style scoped lang="scss">
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.pay-box {
	width: 100%;
	height: 90px;
	background-color: #99999933;
	text-align: center;
}

.pay-card {
	width: 100%;
	background-color: #fff;
	margin-bottom: 15px;
	text-align: center;
}


.pay-money {
	font-size: 28px;
	font-weight: bold;
	color: #333;
	margin-bottom: 8px;
}

.pay-tips {
	font-size: 12px;
	color: #999;
}

/* 支付方式 */
.pay-box {
	background-color: #fff;
	border-radius: 8px;
	padding: 0 15px;
	margin-bottom: 20px;
}

.pay-title {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;
}

.pay-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;
}

.pay-left {
	display: flex;
	align-items: center;
}

.pay-icon {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}

.pay-name {
	font-size: 14px;
	color: #333;
}


.pay-button {
	background-color: #2984F8;
	color: #fff;
	border-radius: 8px;
	font-size: 16px;
	height: 44px;
	line-height: 44px;
	margin: 0 15px;
}
</style>